<template>
  <div
    style="width: 100vw;height: 100vh;position: fixed;left: 0;top: 0;z-index: 10000;background-color: rgba(0,0,0,0);display: flex;flex-direction: column;gap: 16px;align-items: center;justify-content: center;transition: opacity .1s;"
    :style="{
      pointerEvents: showLoadingMask ? 'fill' : 'none',
      opacity: showLoadingMask ? 1 : 0
    }">
    <div
      style="width: 80px;height: 80px;display: inline-block;border-radius: 8px;background-color: rgba(0,0,0, 0.6);box-shadow: 0 8px 30px rgba(0,0,0,0.2);backdrop-filter: blur(10px);">
      <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
        <loadingCircle>
        </loadingCircle>
      </div>
    </div>
  </div>
  <dialog_archive_addOrEdit></dialog_archive_addOrEdit>
  <model></model>
  <cFormDialog></cFormDialog>
  <!-- 页面 -->
  <div @mouseup="() => {
    tool.event.setItem('globalMouseUp', store.mousePosition)
  }" v-if="ready" @mousemove="(e) => {
    store.updateMousePosition({
      x: e.x,
      y: e.y
    })
  }" style="width: 100vw;height: 100vh;position: relative;overflow: hidden;">
    <router-view style="position: absolute;left: 0;top:0;width: 100%;height: 100%;"></router-view>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount } from 'vue';
import dialog_archive_addOrEdit from './components/dialog_archive_addOrEdit.vue';
import model from './components/model.vue';
import cFormDialog from './components/cFormDialog.vue';
import flexBox from './components/flexBox.vue'

import { useStore } from './modules/store'
const store = useStore()

import tool from './modules/tool';

const ready = ref(true)

import loadingCircle from './components/loadingCircle.vue'
const showLoadingMask = ref(false)
tool.event.onChange('controlLoadingMask', () => {
  showLoadingMask.value = tool.event.getItem('controlLoadingMask')
})

onMounted(async () => {

})
</script>

<style scoped></style>